<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
        <title>tree</title>
        <style>
            .tree-menu{
                display: none;
            }
            .tree-menu.top-level{
                display: block;
            }
            .tree-menu li{
                position: relative;
                padding-left: 16px;
                font-size: 16px;
                line-height: 32px;
            }
            .tree-menu li .toggle-icon{
                position: absolute;
                left:0;
                top:10px;
                width:12px;
                height:12px;
                font-size: 12px;
                line-height: 12px;
                text-align: center;
                border:1px solid #AAA;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <ul id="treeMenu" class="tree-menu top-level"></ul>
        <script>
        let treeMenu = document.querySelector('#treeMenu');
        //给根ul添加点击事件，因为不管点击哪个em,都会把点击事件冒泡到treeMenu
        treeMenu.addEventListener('click',(event)=>{
            let {target}=event;//em
            //判断点击是不是开关小图标，是不是em,是否有toggle-icon的类名
            if(target.classList.contains('toggle-icon')){
                //获取自定义属性state
                const {state} = target.dataset;
                //如果原来状态是open,那就要关闭
                if(state === 'open'){
                    target.dataset.state = 'close';//把自定义状态改为close
                    target.innerText = '+';//让文本改为+
                    target.nextElementSibling.style.display = 'none';//隐藏子菜单 
                }else{
                    target.dataset.state = 'open';//打开
                    target.innerText = '-';//icon图标文本改为-
                    target.nextElementSibling.style.display = 'block';//显示子菜单 
                }
            }  
        });
        function renderTree(data){
            let html = '';
            data.forEach((item)=>{
                //name是菜单的名称，open表示是否打开状态 children子菜单 
                const {name,children,open=false} = item;
                html += `
                 <li>
                    <span>${name}</span>
                    ${
                        children?`<em data-state="${open?'open':'close'}" class="toggle-icon">${open?'-':'+'}</em>`:``
                    }
                    ${
                        children?`
                        <ul class="tree-menu" style="display:${open?'block':'none'}">
                            ${renderTree(children)}
                        </ul>
                        `:``
                    }
                  </li>
                `;
            });
            return html;
        }
        let xhr = new XMLHttpRequest();
        xhr.open('GET','https://static.zhufengpeixun.com/data_1684067863819.json',true);
        xhr.onload = function(){
            //调用接口返回服务器端的数据，是一个菜单数组
            const data = JSON.parse(xhr.responseText);
            //把这个菜单数组变成一个HTML字符串
            const treeHtml = renderTree(data);
            console.log('====================================');
            console.log(treeHtml);
            console.log('====================================');
            //赋给treeMenu
            treeMenu.innerHTML=treeHtml;
        }
        xhr.send();
    </script>
    </body>
</html>